<template>
<div v-if="disPlayFlag">
    <div class="addzz">
        <div slot="header" class="clearfix addzz-title">
            <span>新建岗位</span>
        </div>
        <div>
            <el-form :rules="rules" ref="targetForm" :model="temp" label-width="100px" label-position='right' size="small">

                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="所属组织" prop="ouinfoId">
                            <el-input v-model="temp.ouinfoIdOzOrgOuinfoName" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="岗位状态" prop="status">
                            <el-radio v-model="temp.status" v-for="item in statusOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="岗位名称" prop="name">
                            <el-input v-model="temp.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="岗位编码" prop="code">
                            <el-input v-model="temp.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="内建岗位" prop="innerFlag">
                            <el-radio v-model="temp.innerFlag" v-for="item in yesOrNoOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="岗位类型" prop="groupType">
                            <el-select clearable v-model="temp.groupType">
                                <el-option v-for="item in groupTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-form-item label="备注说明" prop="memos">
                        <el-input v-model="temp.memos" type="textarea" :rows="4"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row :gutter="5">
                <el-col style="text-align: right;">
                    <el-button class="filter-item" type="primary" @click="saveData">保 存</el-button>
                    <el-button class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
                </el-col>
            </el-row>
            <div class="addzz-line" style="margin-bottom:20px;"></div>
            <el-row :gutter="5">
                <el-tabs class="addzz-tab" v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane :label="'岗位角色'" name="jobRole">
                        <keep-alive>
                            <tab-pane-job-role :disPlayFlag="activeName == 'jobRole'" :groupId="groupId"></tab-pane-job-role>
                        </keep-alive>
                    </el-tab-pane>
                    <el-tab-pane :label="'岗位成员'" name="jobMember">
                        <keep-alive>
                            <tab-pane-job-member :disPlayFlag="activeName == 'jobMember'" :groupId="groupId"></tab-pane-job-member>
                        </keep-alive>
                    </el-tab-pane>
                    <el-tab-pane :label="'岗位负责人'" name="jobPrincipal">
                        <keep-alive>
                            <tab-pane-job-principal :disPlayFlag="activeName == 'jobPrincipal'" :groupId="groupId"></tab-pane-job-principal>
                        </keep-alive>
                    </el-tab-pane>
                    <el-tab-pane :label="'岗位权限'" name="jobAuthority">
                        <keep-alive>
                            <tab-pane-job-authority :disPlayFlag="activeName == 'jobAuthority'" :groupId="groupId"></tab-pane-job-authority>
                        </keep-alive>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </div>
    </div>
</div>
</template>

<script>
import {
  insertItem,
  compositeSelect,
  updateItem
} from '@/api/systemManage/jobManagementEdit'
import {
  statusOptions,
  statusKeyValue,
  yesOrNoOptions,
  yesOrNoKeyValue,
  groupTypeOptions,
  groupTypeKeyValue
} from '@/utils/allOptions'

import tabPaneJobRole from './tabPaneJobRole'
import tabPaneJobMember from './tabPaneJobMember'
import tabPaneJobPrincipal from './tabPaneJobPrincipal'
import tabPaneJobAuthority from './tabPaneJobAuthority'

export default {
  name: 'userManagementEdit',
  components: {
    tabPaneJobRole,
    tabPaneJobMember,
    tabPaneJobPrincipal,
    tabPaneJobAuthority
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    editType: {
      type: String,
      default: ''
    },
    ouinfoId: {
      type: String,
      default: ''
    },
    ouinfoName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      statusOptions,
      yesOrNoOptions,
      groupTypeOptions,
      // -------Options-----------
      temp: {
        id: '',
        ouinfoId: '',
        status: '0',
        innerFlag: 'Y',
        name: '',
        namePinyin: '',
        code: '',
        groupType: '',
        memos: '',
        ouinfoIdOzOrgOuinfoName: ''
      },
      rules: {

        name: [{
          required: true,
          message: '请输入岗位名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        code: [{
          required: true,
          message: '请输入岗位编码',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        groupType: [{
          required: true,
          message: '请输入岗位类型',
          trigger: 'blur'
        }],
        memos: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ]
      },
      activeName: '',
      tabPaneNameArray: [],
      groupId: '',
      paneDisPlayFlag: ''
    }
  },
  filters: {
    statusFilter(target) {
      return statusKeyValue[target]
    },
    yesOrNoFilter(target) {
      return yesOrNoKeyValue[target]
    },
    groupTypeFilter(target) {
      return groupTypeKeyValue[target]
    }
  },
  mounted() {
    if (this.disPlayFlag) {
      this.editForm()
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          console.log(this.id)
          this.groupId = this.id
          this.editForm()
          this.activeName = 'jobRole'
        } else {
          this.resetAll()
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name)
      this.activeName = tab.name
    },
    closeSelf() {
      this.resetAll()
      this.$emit('closeMe')
    },
    resetAll() {
      this.groupId = ''
      this.activeName = ''
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          if (this.editType === '1') {
            updateItem(this.temp.id, this.temp).then(() => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            })
          } else {
            insertItem(this.temp).then(response => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              console.log(response.data)
              this.groupId = response.data.data.id
            })
          }
        }
      })
    },
    editForm() {
      if (this.editType === '1') {
        const searchCon = {
          condition: {
            id: {
              property: 'id',
              value: this.id,
              type: 'EQ'
            }
          },
          fields: [
            'id',
            'ouinfoId',
            'status',
            'innerFlag',
            'name',
            'namePinyin',
            'code',
            'groupType',
            'memos',
            'ouinfoIdOzOrgOuinfoName'
          ]
        }
        compositeSelect(searchCon).then(response => {
          if (response.data.data.count > 0) {
            const resData = response.data.data.records[0]
            this.temp = Object.assign({}, resData) // copy obj   this.subSystemsOptions.push(input);
          }
        })
      } else {
        this.temp = {
          id: '',
          ouinfoId: this.ouinfoId,
          status: '0',
          innerFlag: 'Y',
          name: '',
          namePinyin: '',
          code: '',
          groupType: '',
          memos: '',
          ouinfoIdOzOrgOuinfoName: this.ouinfoName
        }
      }
    }
  }
}
</script>
